<template>
	<view class="uni-common-mt" style="min-width:550upx;">
		<view style="text-align: left;">说明：1.点选规格并扫码付款后将本页截图给客服2.转账对应金额给客服，客服微信：18375989678</view>
		<view>设备id：<span style="color: red;">{{deviceId}}</span></view>
		<h2>点选规格</h2>
		<view class="uni-title uni-common-pl">选择购买天数</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					购买天数
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindDatePickerChange" :value="datePriceRangeIndex" range-key="date" :range="datePriceList">
						<view class="uni-input">{{datePriceList[datePriceRangeIndex].date}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-title uni-common-pl">选择账号数量</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					账号数量
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindLimitPickerChange" :value="limitIndex" range-key="limit" :range="limitList">
						<view class="uni-input">{{limitList[limitIndex].limit}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view style="font-size: 18px;">价格： <span style="color: red">{{totalPrice.toFixed(2)}}</span></view>
		<!-- <view style="margin-top: 20px;">
			<h2>扫码付款</h2>
			<view class="imgEa">
				<h3>支付宝</h3>
				<img src="../../../static/alipay.jpg" class="imgStyle"/>
			</view>
			<view class="imgEa" style="margin-top: 20px;">
				<h3>微信</h3>
				<img src="../../../static/wechat.jpg" class="imgStyle"/>
			</view>
		</view> -->
	</view>
</template>

<script>
	import api from "../../../api/api.js"
	export default {
		props:{
			deviceId: {type: [Number, String]}
		},
		data() {
			return {
				datePriceRangeIndex: 0,
				datePriceList: [
					{"date": 2, "price": 4},
					{"date": 5, "price": 9},
					{"date": 7, "price": 12},
				],
				basePrice: 0.1,
				totalPrice: 0,
				"limitList": [
					{"limit": 10, "saleLimit": 10},
					{"limit": 20, "saleLimit": 20},
					{"limit": 30, "saleLimit": 30},
					{"limit": 40, "saleLimit": 40},
					{"limit": 50, "saleLimit": 50},
					{"limit": 60, "saleLimit": 60},
					{"limit": 70, "saleLimit": 70},
					{"limit": 80, "saleLimit": 80},
					{"limit": 90, "saleLimit": 90},
					{"limit": 100, "saleLimit": 100},
					{"limit": 150, "saleLimit": 150},
					{"limit": 200, "saleLimit": 200}
				],
				limitIndex: 0
				
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				api.getPriceJson().then(res => {
					this.limitIndex = 0
					this.basePrice = res.data.price
					this.limitList = res.data.limitList
					this.datePriceList = res.data.datePriceList
					this.datePriceRangeIndex = 0
					this.totalPrice = this.datePriceList[this.datePriceRangeIndex].price * this.limitList[this.limitIndex].saleLimit * this.basePrice
					console.log(this.totalPrice)
					this.$forceUpdate()
				}).catch(e => {
					uni.showToast({
						title: "网络连接错误"
					})
				})
			},
			bindDatePickerChange(e) {
				this.datePriceRangeIndex = e.target.value
				this.totalPrice = this.datePriceList[this.datePriceRangeIndex].price * this.limitList[this.limitIndex].saleLimit * this.basePrice
			},
			bindLimitPickerChange(e) {
				this.limitIndex = e.target.value
				this.totalPrice = this.datePriceList[this.datePriceRangeIndex].price * this.limitList[this.limitIndex].saleLimit * this.basePrice
			}
		}
	}
</script>

<style>
	.imgStyle{
		width: 200px;
		height: 200px; 
		background-color: #eeeeee;
	}
	.imgEa{
		border: 1px solid #d0d0ce;
	}
</style>
